<template>

	<van-tabs v-model="active" scrollspy>
		<van-tab v-for="(item,index) in product" :title="item.assort">
			<div>
				<div class="title"> {{ item.assort }} </div>
				<van-grid :column-num="3" :border="false">
					<van-grid-item v-for="(list,nub) in item.classify" 
						:key="nub" 
						:icon="list.thumbnail"
						:text="list.title" 
						:to="{name:'classifylist',query:{tabulation:JSON.stringify(item.classify),active:JSON.stringify(list.title)}}"/>
				</van-grid>
				<div v-if="item.assort=='手艺'" style="height: 510px;"></div>
			</div>
		</van-tab>
	</van-tabs>

</template>

<script>
	export default {
		name: 'Sidebar',
		data() {
			return {
				active: 0,
				product: [{
						assort: '推荐',
						classify: [{
								title: '铁观音',
								thumbnail: './images/list/推荐/铁观音.jpg'
							},
							{
								title: '龙井',
								thumbnail: './images/list/推荐/龙井.jpg'
							},
							{
								title: '金骏眉',
								thumbnail: './images/list/推荐/金骏眉.jpg'
							},
							{
								title: '武夷岩茶',
								thumbnail: './images/list/推荐/岩茶.jpg'
							},
							{
								title: '云南滇红',
								thumbnail: './images/list/推荐/云南滇红.jpg'
							},
							{
								title: '紫砂壶',
								thumbnail: './images/list/推荐/紫砂壶.jpg'
							},
						],
					},
					{
						assort: '绿茶',
						classify: [{
								title: '龙井',
								thumbnail: './images/list/绿茶/龙井.jpg'
							},
							{
								title: '黄山毛峰',
								thumbnail: './images/list/绿茶/黄山毛峰.jpg'
							},
							{
								title: '碧螺春',
								thumbnail: './images/list/绿茶/碧螺春.jpg'
							},
							{
								title: '珍惜白茶',
								thumbnail: './images/list/绿茶/白茶.png'
							},
						],
					},
					{
						assort: '红茶',
						classify: [{
								title: '英德红茶',
								thumbnail: './images/list/红茶/英德红茶.jpg'
							},
							{
								title: '正山小种',
								thumbnail: './images/list/红茶/正山小种.jpg'
							},
							{
								title: '云南滇红',
								thumbnail: './images/list/红茶/云南滇红.jpg'
							},
							{
								title: '祁门红茶',
								thumbnail: './images/list/红茶/祁门红茶.jpg'
							},
						],
					},
					{
						assort: '普尔',
						classify: [{
								title: '生茶',
								thumbnail: './images/list/普尔/生茶.jpg'
							},
							{
								title: '熟茶',
								thumbnail: './images/list/普尔/熟茶.jpg'
							},
						],
					},
					{
						assort: '花茶',
						classify: [{
							title: '茉莉花茶',
							thumbnail: './images/list/绿茶/碧螺春.jpg'
						}, ],
					},
					{
						assort: '茶具',
						classify: [{
								title: '茶宠',
								thumbnail: './images/list/茶具/茶宠.jpg'
							},
							{
								title: '紫砂壶',
								thumbnail: './images/list/茶具/紫砂壶.jpg'
							},
						],
					},
					{
						assort: '手艺',
						classify: [{
							title: '根雕',
							thumbnail: './images/list/茶具/茶宠.jpg'
						}, ],
					},

				]
			}
		},
	}
</script>


<style scoped>
	.title {
		margin-top: 1.2rem;
		margin-bottom: 0.8rem;
		text-align: center;
	}

	.van-tabs {
		display: flex;
		justify-content: space-between;
	}

	/* 左侧导航栏 */
	::v-deep .van-tabs__nav {
		position: relative;
		display: block;
		background-color: #fff;
		-webkit-user-select: none;
		border-right: 1px solid #EFEFEF;
		width: 5rem;
		user-select: none;
	}

	::v-deep .van-tabs__wrap--scrollable .van-tabs__nav {
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
		padding-right: 0px;
		padding-left: 0px;
		position: fixed;
		left: 0;
	}

	::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
		padding-right: 0px;
		padding-left: 0px;
	}

	::v-deep .van-tabs__wrap {
		height: 100%;
		width: auto;
		overflow-y: auto;
	}

	::v-deep .van-tabs__line {
		display: none;
	}

	::v-deep .van-tab {
		position: relative;
		height: 50px;
		width: auto;
	}

	::v-deep .van-tab--active {
		color: red;
		background-color: white;
	}

	::v-deep .van-tab--active::before {
		position: absolute;
		top: 50%;
		left: 0;
		width: 4px;
		height: 16px;
		background-color: #ee0a24;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		content: '';
	}

	/* 右侧导航栏 */
	::v-deep .van-tabs__content {
		background-color: #fff;
		width: calc(100% - 94px);
		height: 100%;
		overflow-y: auto;
	}
</style>
